import React, { Component } from 'react'
import { StyleSheet, View, Text, ScrollView } from 'react-native'

import { connect } from 'react-redux'
import HeaderDefault from '../../components/header/HeaderDefault'
import EveFatherDetail from './EveFatherDetail'

class EveMNADetail extends Component {
  constructor(props) {
    super(props)

    this.state = {
      nutrition_0: { key: '2=食欲正常', value: 2 },
      nutrition_1: { key: '3=无体重下降', value: 3 },
      nutrition_2: { key: '1=能不依赖床或椅子，但不能外出', value: 1 },
      nutrition_3: { key: '2=无', value: 2 },
      nutrition_4: { key: '2=无问题', value: 2 },
      nutrition_5: { key: '3=大于或等于23', value: 3 }
    }
  }
  static navigationOptions = ({ navigation }) => ({
    header: (
      <HeaderDefault
        rightRitle="提交"
        rihghtBtnOnPress={() => {
          navigation.state.params.clickRightMethod()
        }}
        backBtnOnPress={navigation.goBack}
        title="MNA量"
      />
    )
  })

  componentDidMount() {
    this.props.navigation.setParams({ clickRightMethod: this._ritBtn })
  }

  _ritBtn = () => {}

  render() {
    return (
      <EveFatherDetail pInfo={this.props.navigation.state.params.pinfo}>
        <ScrollView bounces={false} style={{ flex: 1 }}>
          {this._renderTableHeader('营养筛查')}

          {/* 00__1 */}
          {this._renderItem(
            yyItemList[0],
            this.state.nutrition_0,
            yyItemOpion[0],
            value => {
              this.setState({
                nutrition_0: value
              })
            }
          )}

          {/* 00__2 */}
          {this._renderItem(
            yyItemList[1],
            this.state.nutrition_1,
            yyItemOpion[1],
            value => {
              this.setState({
                nutrition_1: value
              })
            }
          )}

          {/* 00__3 */}
          {this._renderItem(
            yyItemList[2],
            this.state.nutrition_2,
            yyItemOpion[2],
            value => {
              this.setState({
                nutrition_2: value
              })
            }
          )}

          {/* 00__4 */}
          {this._renderItem(
            yyItemList[3],
            this.state.nutrition_3,
            yyItemOpion[3],
            value => {
              this.setState({
                nutrition_3: value
              })
            }
          )}

          {/* 00__5 */}
          {this._renderItem(
            yyItemList[4],
            this.state.nutrition_4,
            yyItemOpion[4],
            value => {
              this.setState({
                nutrition_4: value
              })
            }
          )}

          {/* 00__6 */}
          {this._renderItem(
            yyItemList[5],
            this.state.nutrition_5,
            yyItemOpion[5],
            value => {
              this.setState({
                nutrition_5: value
              })
            }
          )}

          {/* 总分 */}
          {this._renderToalScore(this._calculateScore1())}
        </ScrollView>
      </EveFatherDetail>
    )
  }

  _calculateScore1 = () => {
    let { value: value0 } = this.state.nutrition_0
    let { value: value1 } = this.state.nutrition_1
    let { value: value2 } = this.state.nutrition_2
    let { value: value3 } = this.state.nutrition_3
    let { value: value4 } = this.state.nutrition_4
    let { value: value5 } = this.state.nutrition_5

    return value0 + value1 + value2 + value3 + value4 + value5
  }

  _renderItem(itemstr, nutrition, opionion, itemPress) {
    let { key: inputKey, value: inputValue } = nutrition

    return (
      <View
        style={{
          width: screenWidth,
          borderBottomColor: '#9b9b9b',
          flexDirection: 'row',
          alignItems: 'center',
          borderBottomWidth: 1
        }}
      >
        <View
          style={{
            width: screenWidth - 80,
            borderRightWidth: 1,
            paddingRight: 5,
            borderRightColor: '#9b9b9b'
          }}
        >
          <Text
            style={{
              paddingTop: 5,
              paddingBottom: 5,
              paddingLeft: 10,
              paddingRight: 10
            }}
          >
            {itemstr}
          </Text>
          <View
            style={{
              width: screenWidth - 80,
              flexDirection: 'row',
              flexWrap: 'wrap',
              paddingRight: 10
            }}
          >
            {opionion.map((value, index) => {
              return (
                <Text
                  onPress={() => {
                    itemPress(value)
                  }}
                  key={value.key}
                  style={{
                    marginTop: 5,
                    marginBottom: 5,
                    marginLeft: 10,
                    padding: 5,
                    backgroundColor: inputKey === value.key ? '#46cbf7' : '#eee'
                  }}
                >
                  {value.key}
                </Text>
              )
            })}
          </View>
        </View>

        <Text style={{ width: 80 }}>
          &nbsp;&nbsp;&nbsp;&nbsp;{inputValue ? inputValue : 0}分
        </Text>
      </View>
    )
  }

  _renderToalScore(inputValue) {
    return (
      <View
        style={{
          width: screenWidth,
          borderTopColor: '#9b9b9b',
          borderTopWidth: 1,
          borderBottomColor: '#9b9b9b',
          borderBottomWidth: 1,
          flexDirection: 'row',
          alignItems: 'center'
        }}
      >
        <View
          style={{
            width: screenWidth - 80,

            justifyContent: 'center',
            borderRightWidth: 1,
            borderRightColor: '#9b9b9b'
          }}
        >
          <Text
            style={{
              padding: 10
              // paddingLeft: 10,
              // paddingRight: 10
            }}
          >
            筛检分数（小计满分14）：≥12表示正常（无营养不良危险性）,无需以下评价，
            <Text style={{ color: 'red' }}>
              ≤11 提示可能营养不良，请继续以下评价
            </Text>
          </Text>
        </View>
        <Text style={{ width: 80 }}>
          &nbsp;&nbsp;&nbsp;&nbsp;{inputValue ? inputValue : 0}分
        </Text>
      </View>
    )
  }
  _renderTableHeader(headerStr) {
    return (
      <View
        style={{
          width: screenWidth,
          height: 45,

          borderTopColor: '#9b9b9b',
          borderTopWidth: 1,
          borderBottomColor: '#9b9b9b',
          borderBottomWidth: 1,

          flexDirection: 'row',
          alignItems: 'center'
        }}
      >
        <View
          style={{
            width: screenWidth - 80,
            height: 45,
            justifyContent: 'center',
            borderRightWidth: 1,
            borderRightColor: '#9b9b9b'
          }}
        >
          <Text
            style={{
              paddingLeft: 10,
              paddingRight: 10,
              fontWeight: 'bold'
            }}
          >
            {headerStr}
          </Text>
        </View>
        <Text style={{ width: 80 }}>&nbsp;&nbsp;&nbsp;&nbsp;分数</Text>
      </View>
    )
  }
}

const yyItemList = [
  '1. 既往三个月内是否由于饮食下降、消化问题、咀嚼或吞咽困难而摄食减少？',
  '2. 近3个月内体重下降情况',
  '3. 活动能力',
  '4. 既往3个月内有无重大心理变化或急性疾病',
  '5. 神经心理问题',
  '6. 身体质量指数BMI(kg/m2):体重(kg)/身高(㎡)'
]

const yyItemOpion = [
  [
    { key: '0=食欲完全丧失', value: 0 },
    { key: '1=食欲中等度下降', value: 1 },
    { key: '2=食欲正常', value: 2 }
  ],
  [
    { key: '0=大于3kg', value: 0 },
    { key: '1=不知道', value: 1 },
    { key: '2=1～3kg', value: 2 },
    { key: '3=无体重下降', value: 3 }
  ],
  [
    { key: '0=需要卧床或长期坐着', value: 0 },
    { key: '1=能不依赖床或椅子，但不能外出', value: 1 }
  ],
  [{ key: '0=有', value: 0 }, { key: '2=无', value: 2 }],
  [
    { key: '0=严重智力减退或抑郁', value: 0 },
    { key: '1=轻度智力减退', value: 1 },
    { key: '2=无问题', value: 2 }
  ],
  [
    { key: '0=小于19', value: 0 },
    { key: '1=19～小于21', value: 1 },
    { key: '2=21～小于23', value: 2 },
    { key: '3=大于或等于23', value: 3 }
  ]
]

const styles = StyleSheet.create({})

function select(store) {
  return { user_info: store.userInfo.user_info }
}

export default connect(select)(EveMNADetail)
